<template>
  <div class="article">
    <view class="head">
      <div class="returnBtn" @click="goBack">
        <image src="/static/images/stationInfo/icon_return@2x.png" alt="" mode="widthFix"></image>
      </div>
      <div class="article_title">{{ parperList.exaParper.parperName }}</div>
    </view>

    <view class="articleDetail">
      <div class="detailContent">

        <!-- 题目标题 -->
        <!-- <div class="top">
          <div class="title">{{ parperList.exaParper.parperName }}</div>
          <div class="time">共{{ parperList.exaParper.questionNum }}题</div>
        </div> -->

        <!-- 题目内容 -->
        <div class="content">
          <div class="preContent" v-for="(question, qIndex) in parperList.exaClassVoList" :key="qIndex">
            <div class="tiMu">
              <div class="tiMu_top">
                <div class="tiMuTitle">{{ question.exaParperClass.className }}</div>
                <div class="tiMuScore">共{{ question.exaClassQuestionsList.length }}题</div>
              </div>
              <div class="shiTi" v-for="(item, index) in question.exaClassQuestionsList" :key="index">

                <div class="felx">
                  <div class="tiMuTitle">
                    <div class="tiMuTitle_txt">
                      <span>{{ index + 1 }}.</span>
                      <span style="margin-left: calc(100vw * 10 / 2560);">
                        {{ item.exaQuestionBankVo.exaQuestionBank.title }}
                      </span>
                    </div>
                    <!-- <div class="tiMuTitle_score">（{{ item.exaQuestionBankVo.exaQuestionBank.score }}分）</div> -->
                  </div>

                  <div class="tiMuOptions">
                    <template v-if="item.exaQuestionBankVo.exaQuestionBank.type != 4">
                      <div class="option" v-for="(option, oIndex) in item.exaQuestionBankVo.exaQuestionOptionsList"
                        :key="oIndex">
                        <div class="daAn">
                          <span>{{ String.fromCharCode(65 + oIndex) }}： </span>
                          <span>{{ option.content }}</span>
                        </div>

                        <div class="dui" v-if="option.rorw">
                          <image src="/static/images/index/icon_mark.svg" alt="" mode="widthFix"></image>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <div class="returnTop" :class="{ show: showTopBtn }" @click="goTop">
            <image src="/static/images/stationInfo/icon_return@2x.png" alt="" mode="widthFix"></image>
          </div>
        </div>
      </div>
    </view>
  </div>
</template>

<script>
import { getArticleListByColumnId, getArticleDetailById, getParperInfo } from "@/api/index"
import { baseUrl } from '../../config'
import config from '@/config.js'

export default {
  data() {
    return {
      baseUrl: '', // 基础URL
      tabId: '', // 存储选中的tab id
      columnList: [],
      columnId: '',
      total: 0,
      articleDetail: [],
      parperList: {
        exaParper: {},
        exaClassVoList: []
      },
      showTopBtn: false, // 控制返回顶部按钮的显示
    }
  },
  onLoad(options) {
    console.log('接收到的参数:', options);

    // 接收参数
    this.columnId = options.id;

    this.baseUrl = config.baseUrl

  },
  mounted() {
    this.baseUrl = config.baseUrl
    // 获取文章列表
    if (this.columnId) {
      this.getData();
    }

    const scrollEl = document.querySelector('.articleDetail');
    if (scrollEl) {
      scrollEl.addEventListener('scroll', this.handleScroll);
    }
  },
  beforeDestroy() {
    // 移除滚动监听
    const scrollEl = document.querySelector('.articleDetail');
    if (scrollEl) {
      scrollEl.removeEventListener('scroll', this.handleScroll);
    }
  },
  methods: {
    getData() {
      uni.showLoading({
        title: '加载中...'
      });

      getParperInfo({ parperId: this.columnId, bichId: null }).then(res => {
        console.log("获取试卷内容详情", res);
        if (res.code === 200) {
          this.parperList = res.data || {
            exaParper: {},
            exaClassVoList: []
          };
        }
      }).catch(err => {
        console.error('获取试卷详情失败:', err);
      }).finally(() => {
        uni.hideLoading();
      });
    },

    goBack() {
      // 获取当前页面栈
      uni.navigateBack({
        delta: 1,
        fail: (err) => {
          console.error('返回失败:', err);
          // 如果返回失败，跳转到首页
          uni.switchTab({
            url: '/pages/index'
          });
        }
      });
    },

    handleScroll(e) {
      // 滚动超过 300px 显示按钮
      const scrollTop = e.target.scrollTop;
      this.showTopBtn = scrollTop > 400;
    },

    goTop() {
      const scrollEl = document.querySelector('.articleDetail');
      if (scrollEl) {
        scrollEl.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .custom-tab-bar-wrapper {
  display: none !important;
}

.article {
  width: 100vw;
  height: 100vh;
  background-color: #00063A;

  .head {
    width: 100vw;
    height: calc(100vw * 140 / 2560); // 高度按比例自适应
    background: url('@/static/images/index/bg_top2.png') no-repeat center center;
    background-size: cover;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 calc(100vw * 20 / 2560);

    .returnBtn {
      width: calc(100vw * 64 / 2560);
      height: calc(100vw * 64 / 2560);
      margin-right: calc(100vw * 30 / 2560);

      image {
        width: 100%;
        height: 100%;
      }
    }

    .article_title {
      font-size: calc(100vw * 40 / 2560);
      color: #FFFFFF;
      text-align: left;
    }
  }

  .articleDetail {
    width: calc(100vw * 2500 / 2560);
    height: calc(100vw * 1220 / 2560);
    margin: calc(100vw * 40 / 2560) calc(100vw * 30 / 2560);
    background: url('@/static/images/stationInfo/bg_articleList@2x.png');
    border-radius: calc(100vw * 24 / 2560);
    // padding: calc(100vw * 100 / 2560) calc(100vw * 140 / 2560);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    color: #fff;

    .detailContent {

      .top {
        width: calc(100vw * 1980 / 2560);
        height: calc(100vw * 81 / 2560);
        background: linear-gradient(180deg, #3670FF 0%, #1022D5 100%);
        border-radius: calc(100vw * 12 / 2560);
        font-size: calc(100vw * 32 / 2560);
        padding: 0 calc(100vw * 60 / 2560);
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .content {
        width: calc(100vw * 1980 / 2560);
        margin: calc(100vw * 40 / 2560) auto;
        // border: 1px solid #ddd;
        position: relative;

        .returnTop {
          transform: rotate(90deg);
          position: fixed;
          right: calc(100vw * 100 / 2560);
          bottom: calc(100vw * 100 / 2560);
          width: calc(100vw * 120 / 2560);
          height: calc(100vw * 120 / 2560);
          z-index: 9999;
          opacity: 0; // 默认透明
          visibility: hidden; // 默认隐藏
          transition: all 0.3s ease; // 添加过渡效果

          &.show {
            opacity: 1;
            visibility: visible;
          }

          image {
            width: 100%;
            height: 100%;
          }
        }

        .preContent {
          // padding: 30px 0;
          box-sizing: border-box;

          .tiMu {
            margin: calc(100vw * 40 / 2560) 0;


            .tiMu_top {
              width: calc(100vw * 1980 / 2560);
              height: calc(100vw * 81 / 2560);
              background: linear-gradient(180deg, #3670FF 0%, #1022D5 100%);
              border-radius: calc(100vw * 12 / 2560);
              font-size: calc(100vw * 32 / 2560);
              color: #fff;
              padding: 0 calc(100vw * 60 / 2560);
              margin: calc(100vw * 20 / 2560) auto;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;


              .tiMuTitle,
              .tiMuScore {
                font-size: calc(100vw * 32 / 2560) !important;
                color: #fff;
              }

            }

            .shiTi {
              width: 100%;
              margin: 0 auto;
              margin-bottom: calc(100vw * 20 / 2560);
              padding: calc(100vw * 10 / 2560);
              // background-color: #fff;
              border-radius: calc(100vw * 4 / 2560);
              color: #fff;
              display: flex;
              flex-direction: column;
              gap: calc(100vw * 10 / 2560);
              justify-content: center;
              align-items: center;

              .tiMuTitle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: calc(100vw * 10 / 2560);

                .tiMuTitle_txt {
                  font-size: calc(100vw * 40 / 2560) !important;
                }

                .tiMuTitle_score {
                  font-size: calc(100vw * 32 / 2560);
                  color: #999;
                }
              }

              .tiMuOptions {
                width: calc(100vw * 1200 / 2560);
                display: flex;
                flex-direction: column;

                .option {
                  width: calc(100vw * 1200 / 2560);
                  min-height: calc(100vw * 88 / 2560);
                  line-height: calc(100vw * 70 / 2560);
                  font-size: calc(100vw * 40 / 2560);
                  background: #0B165C;
                  color: #fff;
                  border-radius: calc(100vw * 8 / 2560);
                  border: 2px solid rgba(251, 251, 251, 0.2);
                  margin-top: calc(100vw * 10 / 2560);
                  padding: calc(100vw * 5 / 2560) calc(100vw * 20 / 2560) calc(100vw * 5 / 2560) calc(100vw * 30 / 2560);
                  box-sizing: border-box;
                  border-radius: calc(100vw * 5 / 2560);
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .daAn {
                    width: calc(100vw * 1015 / 2560);
                    height: auto;
                    word-wrap: break-word; // 允许长单词或 URL 地址换行到下一行
                    word-break: break-all; // 允许在单词内换行
                    white-space: normal; // 空白会被忽略，文本会换行
                    line-height: 1.4; // 适当的行高
                    padding: calc(100vw * 5 / 2560) 0; // 添加上下内边距
                  }

                  .dui {
                    width: calc(100vw * 48 / 2560);
                    height: calc(100vw * 48 / 2560);

                    image {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }

              }
            }
          }
        }
      }
    }
  }
}
</style>